@charset "utf-8";
body {
  margin: 0;
  padding: 0;
}
.rop-wrap {
  margin: 10px;
  overflow: hidden;
}
.rop-wrap h3 {
  font-size: 16px;
  font-weight: normal;
}
.rop {
  background-color: #ddd;
  padding: 20px 10px;
  margin: 32px 0 10px;
  border-radius: 5px
}
.lv-line {
  position: relative;
  height: 20px;
  background-color: #eee;
  border-radius: 10px;
  z-index: 10;
  margin-top: 48px;
}
.ruler {
  position: absolute;
  left: 0;
  top: -20px;
  z-index: 1;
  width: 100%;
  height: 20px;
  background-color: ;
}
.ruler span {
  position: absolute;
  top: 0;
  display: block;
  width: 1px;
  height: 5px;
  background-color: #999
}

.ruler span.pointer {
  height: 10px;
  background-color: #666
}
.ruler span.pointer em {
  position: absolute;
  top: -28px;
  left: -50px;
  display: block;
  width: 100px;
  height: 12px;
  color: #999;
  text-align: center;
}
.ruler span.pointer b {
  position: absolute;
  top: -8px;
  left: -3px;
  display: block;
  width: 0;
  height: 0;
  border-top: 3px solid #333;
  border-right: 3px solid transparent;
  border-left: 3px solid transparent
}
.lv-line-c {
  height: 20px;
  background-color: #e93636;
  width: 0;
  border-radius: 10px;
  transition: background-color 2s;
  -moz-transition: background-color 2s;
  -webkit-transition: background-color 2s;
  -o-transition: background-color 2s;
}
.llc-1 { background-color: #e93636}
.llc-2 { background-color: #e5791e}
.llc-3 { background-color: #e2b618}
.llc-4 { background-color: #65cc2a}
.llc-5 { background-color: #25e16f}